<template>
  <div>
    <div class="box clear">
      <div class="left fleft">
        <!-- 柱状图 -->
        <div class="top background">
          <div style="height:300px;padding-top:20px;" id="line_dynamic"></div>

        </div>
        <!-- 出口商品Top5 -->
        <div class="bottom background">
          <div style="height:380px;padding-top:20px;" id="line_pie"></div>

        </div>
      </div>
      <!-- 表格 -->
      <div class="right fright">
        <div class="top background">
          <div class="top_exit">
            <p class="fright" style="width:33%;">出口额</p>
            <p class="fright" style="width:33%;">出口订单</p>
            <p class="fright" style="width:33%;"></p>
          </div>
          <div v-if="tableData.length>0">
            <div class="fright" style="width:33%;">
              <p>{{tableData[1].money}} {{tableData[1].unit}}</p>
              <p>{{tableData[0].money}} {{tableData[0].unit}}</p>
              <p>{{tableData[2].money}} {{tableData[2].unit}}</p>
            </div>
            <div class="fright" style="width:33%;">
              <p>{{tableData[1].num}} 笔</p>
              <p>{{tableData[0].num}} 笔</p>
              <p>{{tableData[2].num}} 笔</p>
            </div>
            <div class="fright" style="width:33%;font-weight: 600;">
              <p>{{tableData[1].title}}</p>
              <p>{{tableData[0].title}}</p>
              <p>{{tableData[2].title}}</p>
            </div>
          </div>

        </div>
        <!-- 折线图 -->
        <div class="bottom background">
          <div style="height:370px;padding-top:20px;" id="line_stacked"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDataCount,
  getDataBar,
  getDataTops,
  getDataChain
} from "@/api/show_data";
export default {
  name: "hello",
  data() {
    return {
      data: [],
      axisData: [],
      tableData: [],
      stackedData: [],
      dynamicData: [],
      pieData: []
    };
  },
  mounted() {
    this.line_dynamic(); //柱状图
    this.line_pie(); //饼图
    this.line_stacked(); //折线图
    this.getData();
  },
  methods: {
    //获取列表数据
    getData() {
      getDataCount().then(res => {
        if (res.code == 0) {
          this.tableData = res.data;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    //柱状图
    line_dynamic() {
      getDataBar()
        .then(res => {
          if (res.code == 0) {
            this.dynamicData = res.data;
            console.log(this.dynamicData);

            let nameData = [];
            let moneyData = [];
            let numData = [];
            let unitData = [];
            res.data.forEach(function(el, idx) {
              // this.$set(nameData,el.name);
              nameData.push(el.name);
              moneyData.push(el.money);
              numData.push(el.num);
              unitData.push(el.unit);
            });

            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
              document.getElementById("line_dynamic")
            );
            // 绘制图表
            let option = {
              title: {
                // text: "动态数据"
                // subtext: "纯属虚构"
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  label: {
                    backgroundColor: "#283b56"
                  }
                }
              },
              legend: {
                data: ["金额", "订单"]
              },
              toolbox: {
                show: true,

              },
              dataZoom: {
                show: false,
                start: 0,
                // end: 100
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: true,
                  data: nameData //X轴下 日期
                },
                {
                  type: "category",
                  boundaryGap: true,
                  // data: nameData //X轴上 日期
                }
              ],
              yAxis: [
                {
                  type: "value",
                  scale: true,
                  name: "万美元",
                  min: 0,
                  boundaryGap: [0.2, 0.2]
                },
                {
                  type: "value",
                  scale: true,
                  name: "订单数",
                  // max: 50,
                  min: 0,
                  boundaryGap: [0.2, 0.2]
                }
              ],
              series: [
                {
                  name: "订单",
                  barMaxWidth: '50',
                  type: "bar",

                  xAxisIndex: 1,
                  yAxisIndex: 1,
                  data: numData //订单数
                },
                {
                  name: "金额",
                  type: "line",
                  data: moneyData //金额数
                }
              ]
            };
            myChart.setOption(option);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //饼图
    line_pie() {
      getDataTops()
        .then(res => {
          if (res.code == 0) {
            this.pieData = res.data;

            let sourceData = [];
            let nameData = [];
            res.data.forEach(function(el, idx) {
              let arr = {};
              arr.name = el.name;
              arr.value = el.num;
              sourceData.push(arr);
            });
            res.data.forEach(function(el, idx) {
              nameData.push(el.name);
            });

            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
              document.getElementById("line_pie")
            );
            // 绘制图表
            let option = {
              title: {
                text: "出口商品排行",
                // subtext: "纯属虚构",
                x: "center"
              },
              tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: "vertical",
                left: "right",
                  data: nameData
                // data: [
                //   "直接访问",
                //   "邮件营销",
                //   "联盟广告",
                //   "视频广告",
                //   "搜索引擎"
                // ]
              },
              series: [
                {
                  name: "访问来源",
                  type: "pie",
                  radius: "55%",
                  center: ["50%", "60%"],
                  // data: [
                  //   { value: 335, name: "直接访问" },
                  //   { value: 310, name: "邮件营销" },
                  //   { value: 234, name: "联盟广告" },
                  //   { value: 135, name: "视频广告" },
                  //   { value: 1548, name: "搜索引擎" }
                  // ],
                  data: sourceData,
                  itemStyle: {
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                  }
                }
              ]
            };
            myChart.setOption(option);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //折线图
    line_stacked() {
      getDataChain()
        .then(res => {
            let nameA = [];
            let dataA = [];
            let arr = [];
          if (res.code == 0) {
              arr = res.data;
              arr.forEach(function (item,i) {
                  let obj = {};
                  let _name = item.name || 'null';
                  obj.value = item.num;
                  obj.name = _name;
                  nameA.push(_name)
                  dataA.push(obj);
              })
            let myChart = this.$echarts.init(
              document.getElementById("line_stacked")
            );
            let option = {
                title: {
                    text: "出口地区排行",
                    subtext: "按订单量排序",
                    x: "center"
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data:nameA
                },
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:dataA
                    }
                ]
            };

              myChart.setOption(option);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  margin: 20px;
  // border: 1px solid #eee;
  border-radius: 6px;
  padding: 20px;
  .left {
    width: calc(50% - 20px);
    margin-right: 20px;
    .background {
      border-radius: 8px;
      background-color: rgb(245, 247, 250);
    }
    .top {
      height: 50vh;
      margin-bottom: 20px;
    }
    .bottom {
      min-height: calc(50vh + 20px);
    }
  }
  .right {
    width: 50%;
    .background {
      background-color: rgb(245, 247, 250);
      border-radius: 8px;
    }
    .top {
      height: 50vh;
      margin-bottom: 20px;
      text-align: center;
      .top_exit {
        overflow: hidden;
        font-weight: 600;
        padding-top: 20px;
      }
      p {
        margin: 0;
        border-bottom: 1px solid #e5e5e5;
        line-height: 10vh;
        height: 10vh;
      }
    }
    .bottom {
      min-height: calc(50vh + 20px);
    }
  }
}

@import "@/styles/common.scss";
</style>